<template>
<div style="height:100%">
  <transition name="router-fade" mode="out-in">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </transition>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: 'app',
  computed: {
    ...mapState([
      'common'
    ])
  }
}
</script>

<style scoped>
.router-fade-enter-active, .router-fade-leave-active {
  transition: opacity .3s;
}
.router-fade-enter, .router-fade-leave-active {
  opacity: 0;
}
 .complete-example {
  height: 100%;
  display: flex;
  flex-flow: column;
  position: relative;
  overflow: hidden;
  z-index: 1;
 }
.complete-example .md-title {
  color: #fff;
}

.complete-example .md-list {
  overflow: auto;
}
.md-theme-blue.md-toolbar {
  background-color: #2196f3;
  color: rgba(255, 255, 255, .87);
}
</style>
